<!DOCTYPE html>
<html lang="zh">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>音乐网站</title>
    <link rel="stylesheet" type="text/css" href="/css/public.css">
    <link rel="stylesheet" type="text/css" href="/css/index.css">
    <link rel="stylesheet" type="text/css" href="/css/singerInfo.css">
    <link rel="stylesheet" type="text/css" href="/css/css/font-awesome.css">
</head>
<body>
    <div id="head2">
        <div id="head2-contain">
            <div id="head2-contain-left">音乐共享网站</div>
            <div id="head2-contain-right">
                <i class="fa fa-search"></i>
                <input type="text" id="head2-contain-right-text" placeholder="醉清风">
                <div id="head2-btn">搜索</div>
            </div>
        </div>
    </div>
    <div id="guider1">
        <div class="guider2">
            <div class="guide g" id="index" >首页</div>
            <div class="guide g" id="music" >在线音乐</div>
            <div class="guide g" id="singer" >歌手</div>
            <div class="guide g" id="album" >音乐专辑</div>
            <div class="guide" id="index_home" >在线空间</div>
        </div>
    </div>
    <div id="singerInfoBox">
        <div id="infoBoxLeft"><img th:src="${singerInfo.getCover()}" alt=""></div>
        <div id="infoBoxRight">
            <div id="singerName" th:text="${singerInfo.getName()}"></div>
            <div>代表作：<span id="masterpiece" th:text="${singerInfo.getMasterpiece()}"></span></div>
            <div>介绍： <span id="introduction" th:text="${singerInfo.getIntroduction()}"></span></div>
        </div>
    </div>
    <div id="musicListBox">
        <div id="musicListTitle">歌曲列表</div>
        <div id="musicList">
            <ul id="listUl">
                <li>
                    <div class="listInfo listInfo1">歌曲</div>
                    <div class="listInfo listInfo2">专辑</div>
                    <div class="listInfo listInfo3">播放</div>
                </li>
                <li th:each="music : ${musicList}">
                      <div class="listInfo listInfo1" th:text="${music.getMusicName()}"></div>
                      <div class="listInfo listInfo2">
                          <a class="a-text" th:href="'/album/albumInfo?albumId='+${music.getAlbumId()}" th:text="${music.getAlbumName()}"></a>
                      </div>
                      <div class="listInfo listInfo3">
                          <a th:href="'/music/musicPlay/'+${music.getMusicId()}">
                              <i class="icons fa-play-circle-o fa" th:attr="id='music'+${music.getMusicId()}"></i>
                          </a>
                      </div>
                </li>
            </ul>
        </div>
    </div>

</body>

<script src="/js/jquery-3.4.1.js"></script>
<script src="/js/index2.js"></script>
<script src="/js/singerInfo.js"></script>

<script th:inline="javascript">
    let singerInfo=[[${singerInfo}]];
    //getMusicBySingerId(singerInfo.singerid);
</script>

</html>